<template>
  <nav class="nav-menu">
    <router-link to="/" class="nav-link">首页</router-link>
    <router-link to="/categories" class="nav-link">分类</router-link>
    <router-link to="/special-offers" class="nav-link">特惠</router-link>
    <router-link to="/admin/login" class="nav-link">卖家后台</router-link>
  </nav>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
</script>

<style scoped>
.nav-menu {
  display: flex;
  gap: 20px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.nav-link:hover {
  background-color: #f0f0f0;
  color: #007bff;
}

.nav-link.router-link-active {
  color: #007bff;
  background-color: #e6f2ff;
}
</style>
